const box = document.querySelector('.banner-con'),
    ul = box.querySelector('ul'),
    ulis = ul.querySelectorAll('li'),
    liWidth = ulis[0].offsetWidth,
    ol = box.querySelector('ol'),
    olis = ol.querySelectorAll('li')

let currentIndex = 1, // 用来记录当前显示的索引
    nextIndex = 2, // 用来记录即将显示的索引
    timer,
    flag = true // 开关 

function move() {
    animate(ul, {
        left: -nextIndex * liWidth
    }, 1500, function () {
        if (currentIndex === 4) {
            css(ul, 'left', -liWidth + 'px')
            currentIndex = 1
            nextIndex = 2
        }
        if (currentIndex === 0) {
            currentIndex = 3
            nextIndex = 4
            css(ul, 'left', -currentIndex * liWidth + 'px')
        }
        flag = true
    })
    // 专门定义一个变量 记录小圆点的索引
    let circleIndex = nextIndex - 1
    for (let i = 0; i < olis.length; i++) {
        olis[i].className = ''
    }
    if (circleIndex === 3) {
        circleIndex = 0
    }
    if (circleIndex < 0) {
        circleIndex = 2
    }
    olis[circleIndex].className = 'active'


    currentIndex = nextIndex
    nextIndex++


}
timer = setInterval(move, 2000)
// 鼠标移入 box 
on(box, 'mouseenter', function () {
    clearInterval(timer)
})
on(box, 'mouseleave', function () {
    timer = setInterval(move, 2000)
})

// 点击小圆点
on(ol, 'click', function (e) {
    const target = e.target || e.srcElement
    if (target.nodeName === 'LI') {
        const index = Array.from(olis).indexOf(target)
        nextIndex = index + 1
        move()
    }
})
